<template>
  <div class="content">
    <el-collapse-transition>
      <div v-show="Collapseflag">
        <el-tabs type="card" v-model="activeName">
          <el-tab-pane v-for="(item, index) in childMenuList" :key="index" :name="item.href" :label="item.name">
            <template #label>
              <div @click="handClick(item)" style="padding: 0 20px">
                <i :class="item.icon" class="iconfont childIcon"></i> {{ item.name }}
              </div>
            </template>

          </el-tab-pane>
        </el-tabs>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'ChildMenu',
  data() {
    return {
      Collapseflag: true,
      childMenuList: [],
      menuTreeChild: [],
      activeName: '',
    }
  },
  computed: {
    ...mapState(['Activepath', 'childrenMenu', 'IsSetting']),
  },
  watch: {
    // 监听路由变化
    Activepath(newv) {
      this.activeName = newv
    },
    childrenMenu(newv) {
      this.childMenuList = newv
    },
    IsSetting(newv, oldv) {
      if (Object.keys(newv).length != 0) {
        this.childMenuList = newv.children
        this.$router.push({ path: newv.children[0].href })
      }
    },
  },
  mounted() {
    this.findChildByHref()
  },

  methods: {
    ...mapActions(['getBreadcrumb']),

    // 会显选中状态
    findChildByHref() {
      const path = localStorage.getItem('path')
      if (path) {
        this.activeName = path
      } else {
        this.activeName = this.childMenuList[0].href
      }
    },
    handClick(tab) {
      console.log(tab);
      this.$router.push({ path: tab.href })
      // 将href存入store的Tage中
      this.$store.commit('Tage', tab.href)
      // 将menu存入store的getvisited中
      this.$store.commit('getvisited', tab)
    },
    // 是否展开菜单
    IsCollapse() {
      this.Collapseflag = !this.Collapseflag
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  width: calc(100%-200px);
}

:deep(.el-tabs__item) {
  background: #e6e8ea;
  margin: 0 10px 0 0;
}

:deep(.el-tabs__header) {
  margin-bottom: 0;
  border-bottom: none;
  margin: 0;
}

:deep(.el-tabs--card>.el-tabs__header .el-tabs__nav) {
  border: none !important;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

:deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active) {
  border-bottom-color: transparent;
  background: #e6e8ea;
}

:deep(.el-tabs--card>.el-tabs__header .el-tabs__item) {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-left: none;
  padding: 0;
}

:deep(.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2)),
:deep(.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child) {
  padding: 0;
}






.box-card {
  cursor: pointer;
  flex: 1;
  text-align: center;
  margin: 0 10px 10px 0;
  // 强制文本一行展示
  white-space: nowrap;
  font-size: 14px;

  &:last-child {
    margin-right: 0;
  }
}

:deep(.el-tabs) {


  :deep(.el-tabs__item) {
    background: #c2c2c2;

    // height: var(--childMenuHeight);
    // line-height: 80px;
    &:last-child {
      margin-right: 0;
    }

    &:hover div i {
      animation: beat 0.5s infinite alternate;
      /*infinite无限循环，alternate动画反向执行回到起点*/
    }

    div {

      // display: flex;
      i {
        z-index: 999;
        display: inline-block;
        // margin-bottom: -10px;
        // line-height: var(--childMenuHeight);
      }
    }
  }

  .el-tabs__nav-prev,
  .el-tabs__nav-next {
    height: var(--childMenuHeight);
    width: 20px;
    text-align: center;
    // line-height: var(--childMenuHeight);
    background: #e8f4ff;
  }
}

.font_center {
  cursor: pointer;
  text-align: center;
  line-height: var(--childMenuHeight);
  color: var(--menuItemHoverBackgroundColor);
  font-size: 0.5rem;
  /* 100/192 */
}

.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}

.rotate-0 {
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

// 收起的时候 收起图标位置样式
.Collapse_Postion {
  position: fixed;
  z-index: 999;
  right: 0.4rem
    /* 80/192 */
  ;
  font-size: 0.5rem
    /* 100/192 */
  ;
}

.Collapse_Postion_OFF {
  position: fixed;
  z-index: 999;
  right: 0.4rem
    /* 80/192 */
  ;
  font-size: 0.5rem
    /* 100/192 */
  ;
}

// .childIcon {
//   font-size: 0.260417rem /* 50/192 */;
// }</style>
